<template>
  <xr-popup ref="xpModal" :type="type" :mask-click="false">
    <view class="wyb-modal"
          :zoom-lessen-multi="zoomLessenMulti"
          :style="{width: autoWidth,height: autoHeight, minWidth: width + 'rpx', minHeight: height + 'rpx',backgroundColor: bgColor,
          borderTopRightRadius: type === 'center' || type === 'bottom' || type === 'left' ? radius + 'px' : 0,
          borderTopLeftRadius: type === 'center' || type === 'bottom' || type === 'right' ? radius + 'px' : 0,
          borderBottomRightRadius: type === 'center' || type === 'top' || type === 'left' ? radius + 'px' : 0,
          borderBottomLeftRadius: type === 'center' || type === 'top' || type === 'right' ? radius + 'px' : 0,
          }"
    >
    <view class="wyb-modal-title" v-if="title" :style="{color: ftColor}">
        {{title}}
    </view>
    <view class="wyb-modal-content">
        <text v-if="!custom">{{content}}</text>
        <view v-if="custom" @tap.stop.prevent @touchmove.stop.prevent>
        <slot />
        </view>
    </view>
    <view class="wyb-modal-btns">
        <view class="wyb-modal-line" :style="{transform: scaleLine}" />
        <view class="wyb-modal-btn-box">
        <view v-if="showCancel"
                class="wyb-modal-cancel"
                hover-class="wyb-modal-cancel-hover"
                hover-stay-time="100"
                :style="{ color: cancelColor || ftColor, borderBottomLeftRadius: radius + 'px'}" @tap="onBtnsTap(0)">
            {{cancelText}}
        </view>
        <view class="wyb-modal-confirm"
                hover-class="wyb-modal-confirm-hover"
                hover-stay-time="100"
                :style="{ color:confirmColor, borderBottomRightRadius: radius + 'px'}" @tap="onBtnsTap(1)">
            <text v-if="!confirmClick">{{confirmText}}</text>
            <view v-if="asyncClose&&confirmClick" class="wyb-modal-loading">
            <view class="wyb-modal-loader"
                    :style="{ borderTop: '1.5px solid ' + loadingColor.top,
                    borderRight: '1.5px solid ' + loadingColor.right,
                    borderBottom: '1.5px solid ' + loadingColor.bottom,
                    borderLeft: '1.5px solid ' + loadingColor.left,
                    transform: 'scale(0.5)'}" />
            </view>
        </view>
        </view>
    </view>
    </view>
  </xr-popup>
</template>

<script>
export default {
  name: 'xpModal',
  data () {
    return {
      ftColor: '#000',
      scaleLine: 'scaleY(1)',
      confirmClick: false,
      param: {}
    }
  },
  computed: {
    loadingColor () {
      const color = this.confirmColor.slice()
      const rgbList = this.hexToRgb(color)
      const top = 'rgba(' + rgbList[0] + ',' + rgbList[1] + ',' + rgbList[2] + ', 0.3)'
      const bottom = 'rgba(' + rgbList[0] + ',' + rgbList[1] + ',' + rgbList[2] + ', 0.3)'
      const right = 'rgba(' + rgbList[0] + ',' + rgbList[1] + ',' + rgbList[2] + ', 0.3)'
      const left = 'rgb(' + rgbList[0] + ',' + rgbList[1] + ',' + rgbList[2] + ')'
      return {
        top,
        bottom,
        right,
        left
      }
    },
    autoWidth () {
      if (this.type === 'center') {
        return `${this.width}rpx`
      } else {
        if (this.mode === 'size-fixed') {
          if (this.type === 'top' || this.type === 'bottom') {
            return '100%'
          } else {
            return `${this.width}rpx`
          }
        } else {
          if (this.type === 'top' || this.type === 'bottom') {
            return '100%'
          } else {
            return 'auto'
          }
        }
      }
    },
    autoHeight () {
      if (this.type === 'center') {
        return `${this.height}rpx`
      } else {
        if (this.mode === 'size-fixed') {
          if (this.type === 'left' || this.type === 'right') {
            return '100%'
          } else {
            return `${this.height}rpx`
          }
        } else {
          if (this.type === 'left' || this.type === 'right') {
            return '100%'
          } else {
            return 'auto'
          }
        }
      }
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmColor: {
      type: String,
      default: '#007aff'
    },
    cancelColor: {
      type: String,
      default: '#000'
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'center'
    },
    width: {
      type: [String, Number],
      default: 600
    },
    height: {
      type: [String, Number],
      default: 350
    },
    bgColor: {
      type: String,
      default: '#fff'
    },
    radius: {
      type: [String, Number],
      default: 5
    },
    zoomLessenMulti: {
      type: Number,
      default: 1.2
    },
    maskAlpha: {
      type: Number,
      default: 0.5
    },
    animation: {
      type: String,
      default: 'zoom-lessen'
    },
    // 是否自定义内容
    custom: {
      type: Boolean,
      default: false
    },
    asyncClose: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    // this.getFtColor()
  },
  methods: {
    onBtnsTap (idx) {
      switch (idx) {
        case 0:
          this.hideModal()
          this.$emit('cancel', this.param)
          break
        case 1:
          if (!this.confirmClick) {
            this.$emit('confirm', this.param)
          }
          if (this.asyncClose) {
            this.confirmClick = true
          } else {
            this.hideModal()
          }
          break
      }
    },
    showModal (param) {
      this.param = param
      this.$refs.xpModal.open()
    },
    hideModal () {
      if (this.confirmClick) {
        this.confirmClick = false
      }
      this.$refs.xpModal.close()
    },
    hexToRgb (color) {
      if (color.length === 4) {
        const arr = color.split('')
        color = '#' + arr[1] + arr[1] + arr[2] + arr[2] + arr[3] + arr[3]
      }
      const color16List = [color.substring(1, 3), color.substring(3, 5), color.substring(5, 7)]
      const r = parseInt(color16List[0], 16)
      const g = parseInt(color16List[1], 16)
      const b = parseInt(color16List[2], 16)
      return [r, g, b]
    }
  }
}
</script>

<style lang="scss" scoped>
.wyb-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 10080;
  overflow: hidden;
}

.wyb-modal-title {
  width: 100%;
  height: 80rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 35rpx;
  color: #333333;
  font-weight: 600;
}

.wyb-modal-content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 30rpx;
}

.wyb-modal-line {
  width: 100%;
  height: 1px;
  background-color: #f1f1f1;
}

.wyb-modal-btns {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wyb-modal-btn-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 35rpx;
}

.wyb-modal-cancel,
.wyb-modal-confirm {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.wyb-modal-cancel {
  border-right: 1px solid #f1f1f1
}

.wyb-modal-cancel-hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.wyb-modal-confirm-hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.wyb-modal-loader {
  width: 35rpx;
  height: 35rpx;
  position: relative;
  -webkit-animation: loading 0.75s infinite linear;
  animation: loading 0.75s infinite linear;
}

.wyb-modal-loader,
.wyb-modal-loader:after {
  border-radius: 50%;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
